import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const types = {
  SET_MINIPLAYERVISIBLE: 'SET_MINIPLAYERVISIBLE',
  SET_PLAYERVISIBLE: 'SET_PLAYERVISIBLE',
  SET_SONG: 'SET_SONG',
  SET_SONGCONTROL: 'SET_SONGCONTROL',
  SET_CURRSONGLIST: 'SET_CURRSONGLIST',
  SET_CURRSONGLISTVISBLE: 'SET_CURRSONGLISTVISBLE',
  SET_CURRSONGINDEX: 'SET_CURRSONGINDEX',
  SET_ISINCURRLIST: 'SET_ISINCURRLIST'
};

const state = {
  /**
   * miniPlayerVisible: false  //迷你音乐播放器是否可见
   * playerVisible: false //音乐播放器是否可见
   * song:{  //当前正在播放或暂停的音乐的歌曲信息
   *   url: String,
   *   id: Number,
   *   name: String,
   *   imgUrl: String,
   *   singers: Array, // singers[0].name
   *   index: Number
   * }
   * songControl:{  //当前歌曲控制相关、动态信息
   *   duration: Number //音乐的总时长
   *   curTime: Number  //音乐当前播放了的时长
   *   currProgress: Number  //音乐当前播放的进度(单位：%)
   * }
   * currSongList: [],  //当前播放列表
   * currSongListVisible  //当前播放列表是否可见
   * currSongIndex  //当前播放列表中的当前播放歌曲的index下标
   * isInCurrList  //是否播放的是当前播放列表里的歌曲
   * */
  miniPlayerVisible: false,
  playerVisible: false,
  song: {},
  songControl: {},
  currSongList: [],
  currSongListVisible: false,
  currSongIndex: 0,
  isInCurrList: false
};

const getters = {
  miniPlayerVisible: state => state.miniPlayerVisible,
  playerVisible: state => state.playerVisible,
  song: state => state.song,
  songControl: state => state.songControl,
  currSongList: state => state.currSongList,
  currSongListVisible: state => state.currSongListVisible,
  currSongIndex: state => state.currSongIndex,
  isInCurrList: state => state.isInCurrList
};

const mutations = {
  [types.SET_MINIPLAYERVISIBLE](state, visible) {
    state.miniPlayerVisible = visible;
  },
  [types.SET_PLAYERVISIBLE](state, visible) {
    state.playerVisible = visible;
  },
  [types.SET_SONG](state, song) {
    if(song) state.song = song;
    else song = null;
  },
  [types.SET_SONGCONTROL](state, songControl) {
    if(songControl) state.songControl = songControl;
    else songControl = null;
  },
  [types.SET_CURRSONGLIST](state, list) {
    if(list) state.currSongList = list;
    else list = [];
  },
  [types.SET_CURRSONGLISTVISBLE](state, visible) {
    state.currSongListVisible = visible;
  },
  [types.SET_CURRSONGINDEX](state, index) {
    if(index) state.currSongIndex = index;
    else index = 0;
  },
  [types.SET_ISINCURRLIST](state, value) {
    state.isInCurrList = value;
  }
};

const actions = {
  setMiniPlayerVisible: ({commit}, visible) => {
    commit(types.SET_MINIPLAYERVISIBLE, visible);
  },
  setPlayerVisible: ({commit}, visible) => {
    commit(types.SET_PLAYERVISIBLE, visible);
  },
  setSong: ({commit}, song) => {
    commit(types.SET_SONG, song);
  },
  setSongControl: ({commit}, songControl) => {
    commit(types.SET_SONGCONTROL, songControl);
  },
  setCurrSongList: ({commit}, list) => {
    commit(types.SET_CURRSONGLIST, list);
  },
  setCurrSongListVisible: ({commit}, visible) => {
    commit(types.SET_CURRSONGLISTVISBLE, visible);
  },
  setCurrSongIndex: ({commit}, index) => {
    commit(types.SET_CURRSONGINDEX, index);
  },
  setIsInCurrList: ({commit}, value) => {
    commit(types.SET_ISINCURRLIST, value);
  }
};

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
});